<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // generator是一种异步编程解决方案，内部封装了很多状态，被叫做状态机
        // generator是个函数 但是在关键字function和函数名之间有个* 
        // generator函数内部要使用yield
        // generator函数的返回值是个迭代器对象（Iterator）
        // generator函数返回的迭代器对象中有个方法next 每调用一次next方法 就改变generator函数内事件的执行情况 由前一个状态进入下一个状态
        // 只要调用next 就从第一句开始（或者上一次yield结束）一直到下句yield结束
        // function* getData() {

        //     yield setTimeout(function () {
        //         console.log('获取事件A');

        //     }, 3000)

        //     ;
        //     yield setTimeout(function () {
        //         console.log('获取事件B');

        //     }, 2000)
        //   ;
        //     yield setTimeout(function () {
        //         console.log('获取事件C');
        //     }, 1000)


        // }
        // const result = getData()
        // result.next();
        // result.next();
        // result.next();
        // 结果 ： 获取事件C 获取事件B 获取事件A
        // 当时间放生的顺序不同时 快的先发生




        function* getData() {

            yield setTimeout(function () {
                console.log('获取事件A');
                result.next();
            }, 3000)

            ;
            yield setTimeout(function () {
                console.log('获取事件B');
                result.next();
            }, 2000);
            yield setTimeout(function () {
                console.log('获取事件C');
            }, 1000)


        }
        const result = getData()
        result.next();
        // 先调用第一个 当第一个完成打印后同时调用第二个 第二个打印完成后调用第三个
    </script>
</body>

</html>